<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<link type="text/css" rel="stylesheet" href="css/stylesheet.css" />
</h:head>

<h:body>
	<h:form>
		<p:growl id="growl" life="3000" />
		<p:scrollPanel mode="native" style="width:100%;height:100%;">
			<p:fieldset legend="Cadastrar bairro">
				<p:wizard flowListener="#{bairroBean.onFlowProcess}">
					<p:tab title="Básico">
						<p:panel header="Informações sobre o nome e o ano de criação">
							<p:messages />
							<h:panelGrid columns="2" columnClasses="label, value">
								<h:outputText value="Nome:" />
								<p:inputText required="true"
									requiredMessage="Nome do bairro não informado!" size="50"
									value="#{bairroBean.bairro.nomeBairro}" />

								<h:outputText value="Ano de criação:" />
								<p:inputMask required="true" mask="9999"
									requiredMessage="Ano de criação do bairro não informado!"
									value="#{bairroBean.bairro.anoCriacaoBairro}" />
							</h:panelGrid>
						</p:panel>
					</p:tab>

					<p:tab title="Confirmar">
						<p:panel header="Confirmação dos dados de cadastro do bairro">
							<p:messages />
							<h:panelGrid columns="2" columnClasses="label, value">
								<h:outputText value="Nome: " />
								<h:outputText styleClass="confirmacaoSaida"
									value="#{bairroBean.bairro.nomeBairro}" />

								<h:outputText value="Ano de criação: " />
								<h:outputText styleClass="confirmacaoSaida"
									value="#{bairroBean.bairro.anoCriacaoBairro}" />
							</h:panelGrid>

							<p:commandButton value="Cadastrar" update="growl" process="@this"
								actionListener="#{bairroBean.salvar}" />
						</p:panel>
					</p:tab>
				</p:wizard>
			</p:fieldset>
		</p:scrollPanel>
	</h:form>
</h:body>

</html>